<template>
  <el-dialog
    v-if="callDetails.recordInfo"
    title="通话详情"
    :visible.sync="visible"
    width="1100px"
    @closed="reset"
  >
    <!-- <div slot="title" class="header-title">
      <img class="info-img" :src="call" alt="">
      <span class="calll-title">通话详情</span>
    </div> -->

    <p class="detaile-title">
      <img class="info-img" :src="info" alt="">基本信息
    </p>

    <div v-if="callDetails.recordInfo.callType==='out'">
      <!-- 外呼 -->

      <el-table
        header-cell-class-name="innerTable"
        :row-style="{ height: '40px' }"
        :border="false"
        :data="[callDetails.recordInfo]"
        style="width: 100%;"
        class="callDetails-table"
      >
        <el-table-column prop="callCode" label="外呼编号" width="180" />
        <el-table-column prop="phone" label="外呼号码" width="180" />
        <el-table-column prop="taskType" label="通话任务类型" width="180">
          <template slot-scope="scope">
            {{
              scope.row.taskType === 1
                ? "销售订单"
                : scope.row.taskType === 2
                  ? "报修"
                  : scope.row.taskType === 3
                    ? "退瓶"
                    : scope.row.taskType === 4
                      ? "投诉"
                      : scope.row.taskType === 0
                        ? "其他"
                        : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="serviceStar" label="服务评价">
          <template slot-scope="scope">
            {{
              scope.row.serviceStar === 1
                ? "满意"
                : scope.row.serviceStar === 2
                  ? "不满意"
                  : ""
            }}
          </template>
        </el-table-column>
      </el-table>
      <el-table
        header-cell-class-name="innerTable"
        :row-style="{ height: '40px' }"
        :border="false"
        :data="[callDetails.recordInfo]"
        style="width: 100%;"
        class="callDetails-table"
      >
        <el-table-column prop="startDt" label="呼叫时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.startDt | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="endDt" label="挂机时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.endDt | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="waitTimeSpan" label="等待时长(秒)" width="180" />

        <el-table-column prop="timeSpan" label="呼叫时长(秒)" width="180" />
        <el-table-column prop="callStatus" label="呼叫状态">
          <template slot-scope="scope">
            {{
              scope.row.callStatus
                ? scope.row.callStatus === 1
                  ? "正常"
                  : scope.row.callStatus === 2
                    ? "占线"
                    : scope.row.callStatus === 3
                      ? "未接听"
                      : scope.row.callStatus === 4
                        ? "通话中"
                        : ""
                : ""
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-else>
      <el-table
        header-cell-class-name="innerTable"
        :row-style="{ height: '40px' }"
        :border="false"
        :data="[callDetails.recordInfo]"
        style="width: 100%;"
        class="callDetails-table"
      >
        <el-table-column prop="callCode" label="来电编号" width="180" />
        <el-table-column prop="phone" label="来电号码" width="180" />
        <el-table-column prop="taskType" label="通话任务类型" width="180">
          <template slot-scope="scope">
            {{
              scope.row.taskType === 1
                ? "销售订单"
                : scope.row.taskType === 2
                  ? "报修"
                  : scope.row.taskType === 3
                    ? "退瓶"
                    : scope.row.taskType === 4
                      ? "投诉"
                      : scope.row.taskType === 0
                        ? "其他"
                        : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="taskCode" label="关联订单" width="180" />
        <el-table-column prop="serviceStar" label="服务评价">
          <template slot-scope="scope">
            {{
              scope.row.serviceStar === 1
                ? "满意"
                : scope.row.serviceStar === 2
                  ? "不满意"
                  : ""
            }}
          </template>
        </el-table-column>
      </el-table>

      <!-- <ul class="title">
      <li>来电编号 </li>
      <li>来电号码 </li>
      <li>通话任务类型 </li>
      <li>关联订单 </li>
      <li>服务评价 </li>
    </ul>
    <ul>
      <li>{{ callDetails.recordInfo.callCode || '' }}</li>
      <li>{{ callDetails.recordInfo.phone || '' }}</li>
      <li>{{ callDetails.recordInfo.taskType===1?'销售订单':(callDetails.recordInfo.taskType===2?'报修':callDetails.recordInfo.taskType===3?'退瓶':callDetails.recordInfo.taskType===4?'投诉':callDetails.recordInfo.taskType===0?'其他':'') }}</li>
      <li>{{ callDetails.recordInfo.taskCode || '' }}</li>
      <li>{{ callDetails.recordInfo.serviceStar===1?'满意': callDetails.recordInfo.serviceStar===2?"不满意":"" }}</li>
    </ul> -->
      <el-table
        header-cell-class-name="innerTable"
        :row-style="{ height: '40px' }"
        :border="false"
        :data="[callDetails.recordInfo]"
        style="width: 100%;"
        class="callDetails-table"
      >
        <el-table-column prop="startDt" label="来电时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.startDt | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="endDt" label="挂机时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.endDt | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="waitTimeSpan" label="等待时长(秒)" width="180" />

        <el-table-column prop="timeSpan" label="来电时长(秒)" width="180" />
        <el-table-column prop="callStatus" label="接听状态">
          <template slot-scope="scope">
            {{
              scope.row.callStatus
                ? scope.row.callStatus === 1
                  ? "正常"
                  : scope.row.callStatus === 2
                    ? "占线"
                    : scope.row.callStatus === 3
                      ? "未接听"
                      : scope.row.callStatus === 4
                        ? "通话中"
                        : ""
                : ""
            }}
          </template>
        </el-table-column>
      </el-table>
    <!-- <ul class="title">
      <li>来电时间</li>
      <li>挂机时间</li>
      <li>等待时长(秒)</li>
      <li>来电时长(秒)</li>
    </ul>
    <ul>
      <li>{{ callDetails.recordInfo.startDt | parseTime }}</li>
      <li>{{ callDetails.recordInfo.endDt | parseTime }}</li>
      <li>{{ callDetails.recordInfo.waitTimeSpan }}</li>
      <li>{{ callDetails.recordInfo.timeSpan }}</li>
    </ul> -->
    </div>

    <p class="detaile-title">
      <img class="info-img" :src="info" alt="">客服人员信息
    </p>
    <el-table
      v-if="callDetails.recordInfo.callType==='out'"
      header-cell-class-name="innerTable"
      :row-style="{ height: '40px' }"
      :border="false"
      :data="[callDetails.recordInfo]"
      style="width: 100%;"
      class="callDetails-table"
    >
      <el-table-column prop="callerName" label="话务员" />
      <el-table-column prop="num" label="坐席号" />
      <el-table-column prop="" label="语音存储">
        <template slot-scope="scope">
          <div class="audio-data">
            <audio
              id="music"
              :src="
                header +
                  pbxUrl +
                  '/download/audio?path=' +
                  encodeURI(scope.row.fileUrl)
              "
            />
            <img
              v-if="!scope.row.fileUrl"
              class="no-play"
              :src="noPlayImg"
              alt=""
            >
            <img
              v-else
              class="playimg"
              :src="play"
              alt=""
              @click="onPlay()"
            >
            <img
              :src="!scope.row.fileUrl ? noDownImg : down"
              alt=""
              @click="downVoice(scope.row.fileUrl)"
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-else
      header-cell-class-name="innerTable"
      :row-style="{ height: '40px' }"
      :border="false"
      :data="[callDetails.recordInfo]"
      style="width: 100%;"
      class="callDetails-table"
    >
      <el-table-column prop="answer" label="接听人" />
      <el-table-column prop="num" label="坐席号" />
      <el-table-column prop="taskType" label="语音存储">
        <template slot-scope="scope">
          <div class="audio-data">
            <audio
              id="music"
              :src="
                header +
                  pbxUrl +
                  '/download/audio?path=' +
                  encodeURI(scope.row.fileUrl)
              "
            />
            <img
              v-if="!scope.row.fileUrl"
              class="no-play"
              :src="noPlayImg"
              alt=""
            >
            <img
              v-else
              class="playimg"
              :src="play"
              alt=""
              @click="onPlay()"
            >
            <img
              :src="!scope.row.fileUrl ? noDownImg : down"
              alt=""
              @click="downVoice(scope.row.fileUrl)"
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <ul class="title">
      <li>接听人</li>
      <li>坐席号</li>
      <li>语音存储</li>
    </ul>
    <ul>
      <li>{{ callDetails.recordInfo.answer }}</li>
      <li>{{ callDetails.recordInfo.num }}</li>
      <li>
        <audio
          id="music"
          :src="
            header +
              pbxUrl +
              '/download/audio?path=' +
              encodeURI(callDetails.recordInfo.fileUrl)
          "
        />
        <img
          v-if="!callDetails.recordInfo.fileUrl"
          class="no-play"
          :src="noPlayImg"
          alt=""
        >
        <img
          v-else
          class="playimg"
          :src="play"
          alt=""
          @click="onPlay()"
        >
        <img
          :src="!callDetails.recordInfo.fileUrl ? noDownImg : down"
          alt=""
          @click="downVoice(callDetails.recordInfo.fileUrl)"
        >
      </li>
    </ul> -->
  </el-dialog>
</template>
<script>
  import playImg from '@/assets/play.png'
  import stopImg from '@/assets/stop.png'
  import downImg from '@/assets/down.png'
  import noDown from '@/assets/no_down.png'
  import noPlay from '@/assets/no_play.png'
  import callImg from '@/assets/call.png'
  import infoImg from '@/assets/info.png'
  export default {
    name: 'detail',
    props: {
      callDetails: Object,
      pbxUrl: String
    },
    data() {
      return {
        visible: false,
        header: 'http://',
        play: playImg,
        stopPlay: stopImg,
        down: downImg,
        noDownImg: noDown,
        noPlayImg: noPlay,
        call: callImg,
        info: infoImg
      }
    },
    methods: {
      open(val) {
        return new Promise(resolve => {
          this.visible = true
        })
      },
      downVoice(file) {
        if (file) {
          const url = `${this.header}${
            this.pbxUrl
          }/download/audio?path=${encodeURI(file)}`
          window.open(url)
        }
      },
      onPlay() {
        if (this.callDetails.recordInfo.fileUrl) {
          const audios = document.getElementById('music')
          // 获取到img标签
          const playimg = document.querySelector('.playimg')
          // 判断音频是否停止
          if (audios.paused) {
            // 如果已停止则播放音频并更换图标
            playimg.src = this.stopPlay

            audios.play()
          } else {
            // 如果已停止重新加载音频并关闭音频和更换图标
            playimg.src = this.play

            audios.pause()

            audios.load()
          }
          audios.addEventListener(
            'ended',
            () => {
              playimg.src = this.play
            },
            false
          )
        }
      },
      reset() {
        this.visible = false
        document.getElementById('music').load()
        document.querySelector('.playimg').src = this.play
      }
    }
  }
</script>

<style lang="scss">
.callDetails-table .innerTable {
  height: 40px;
  background: #fff !important;
}
</style>
<style lang="scss" scoped>
.callDetails-table {
  border: 0;
  /deep/ tr {
    min-height: 40px;
  }
}
.audio-data {
  img {
    height: 20px;
    margin-left: 8px;
    vertical-align: middle;
  }
}
.calll-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #ccc;
  li {
    min-width: 28%;
    line-height: 40px;
    img {
      height: 20px;
      margin-left: 8px;
      vertical-align: middle;
    }
  }
}
.info-img {
  height: 30px;
  margin-right: 8px;
  vertical-align: middle;
}
.scm-info li {
  min-width: 17%;
}
.scm-title li {
  min-width: 15%;
}
.title li {
  font-size: 16px;
  font-weight: 600;
}
section {
  .detaile-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 60px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
